MVC 和 MVVM 区别

MVC

MVC 框架即 Model View Controller，是模型 Model-视图 View-控制器 Controller 的缩写。

Model：模型，是应用程序中用于处理数据逻辑的部分，通常模型对象负责在数据库中存取数据。
View：视图，用户界面显示，通常视图是根据模型数据创建的。
controller：控制器，数据模型和视图之间通信的桥梁。控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC 思想

Controller 负责将 Model 的数据用 View 显示出来。

MVC 优点

耦合度低（运用 MVC 的应用程序的三个部件是相互独立的，改变其中一个不会影响其他两个）；
重用性高（多个视图可以使用同一个模型）
生命周期成本低
部署快（业务分工明确）
可维护性高

MVC 缺点

不适合小型项目开发
视图与控制器联系过于紧密，妨碍了它们的独立重用

手写 MVC

视图 View

<div>
  <span id="count">0</span>
  <button id="btn">+</button>
</div>

控制器 Controller

const btn = document.getElementById('btn')
btn.addEventListener('click',()=>{
  // 获取页面节点
  const counter = document.getElementById('count')
  // 调用模型
  add(counter)
})

模型 Model

function add(node){
  console.log('node.innerText')

  let count = parseInt(node.innerText)
  // 对数据的处理逻辑
  node.innerText = count +1
}

MVVM

MVVM 由 Model，View，ViewModel 三部分构成。

M(Model)：数据模型（Vue 的 data）
V(View)：视图，即 UI，用来展示数据（Vue 的 el）
ViewModel：是一个对象，用来同步视图 View 和模型 Model

双向绑定

View 和 Model 之间没有直接联系，通过 ViewModel 进行交互（即双向数据绑定）。 View 的变化可以引起 Model 的变化，Model 的变化也可以引起 View 变化（类似于浅拷贝）。

通过双向数据绑定，View 和 Model 之间的同步工作完全是自动的，因此开发过程中不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

可以实现双向绑定的标签：Input，textarea，select 标签等（可以输入或改变标签内容的标签）

MVVM 优点

低耦合
可重用性
双向数据绑定，它实现了 View 和 Model 的自动同步

常见的 MVVM 框架：Vue 、React

MVVM 与 MVC 的区别

MVVM 和 MVC 都是一种设计思想。MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步（当 Model 属性改变时，不用手动操作 Dom 元素去改变 View 的显示。而是改变属性后，该属性对应 View 的显示会自动改变）。

MVC 和 MVVM 区别

MVC​

MVC 思想​

MVC 优点​

MVC 缺点​

手写 MVC​

MVVM​

双向绑定​

MVVM 优点​

MVVM 与 MVC 的区别​

MVC